<template>
  <div>
    <el-card>
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <h2 class="my-title">进货管理</h2>
        <div>
          <el-input v-model="searchKey" placeholder="商品/供应商" style="width:200px;margin-right:10px" @keyup.enter.native="search"/>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="success" @click="openCreateDialog">新增进货</el-button>
        </div>
      </div>
    </el-card>
    <el-card style="margin-top: 20px;">
      <el-table :data="list">
        <el-table-column prop="id" label="#" width="60" align="center"/>
        <el-table-column prop="product" label="商品名称" align="center"/>
        <el-table-column prop="quantity" label="数量" align="center"/>
        <el-table-column prop="price" label="单价" align="center"/>
        <el-table-column prop="total" label="总价" align="center"/>
        <el-table-column prop="supplier" label="供应商" align="center"/>
        <el-table-column prop="date" label="进货日期" align="center"/>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="openEditDialog(scope.row)">编辑</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="deletePurchase(scope.row.id)">
              <el-button size="mini" type="danger" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="pagination.total"
        :page-size="pagination.pageSize"
        :current-page="pagination.currentPage"
        @current-change="pageChange">
      </el-pagination>
    </el-card>
    <!-- 新增进货 -->
    <el-dialog title="新增进货" :visible.sync="createDialogVisible" width="400px">
      <el-form :model="newPurchase" label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="newPurchase.product"/>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="newPurchase.quantity" type="number"/>
        </el-form-item>
        <el-form-item label="单价">
          <el-input v-model="newPurchase.price" type="number"/>
        </el-form-item>
        <el-form-item label="供应商">
          <el-input v-model="newPurchase.supplier"/>
        </el-form-item>
        <el-form-item label="进货日期">
          <el-date-picker v-model="newPurchase.date" type="date" placeholder="选择日期" style="width: 100%"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="createDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addPurchase">保存</el-button>
      </div>
    </el-dialog>
    <!-- 编辑进货 -->
    <el-dialog title="编辑进货" :visible.sync="editDialogVisible" width="400px">
      <el-form :model="editPurchase" label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="editPurchase.product"/>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="editPurchase.quantity" type="number"/>
        </el-form-item>
        <el-form-item label="单价">
          <el-input v-model="editPurchase.price" type="number"/>
        </el-form-item>
        <el-form-item label="供应商">
          <el-input v-model="editPurchase.supplier"/>
        </el-form-item>
        <el-form-item label="进货日期">
          <el-date-picker v-model="editPurchase.date" type="date" placeholder="选择日期" style="width: 100%"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updatePurchase">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      pagination: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
      searchKey: '',
      createDialogVisible: false,
      editDialogVisible: false,
      newPurchase: {
        product: '',
        quantity: 1,
        price: 0,
        supplier: '',
        date: ''
      },
      editPurchase: {}
    }
  },
  methods: {
    loadPurchases(page) {
      if (!page) page = 1;
      this.$http.get(`/purchase/list?page=${page}&pageSize=${this.pagination.pageSize}&searchKey=${this.searchKey}`)
        .then(res => {
          if (res.data.code === 2000) {
            this.list = res.data.data.items;
            this.pagination.total = res.data.data.total;
            this.pagination.currentPage = page;
          }
        });
    },
    pageChange(page) {
      this.loadPurchases(page);
    },
    search() {
      this.loadPurchases(1);
    },
    openCreateDialog() {
      this.createDialogVisible = true;
      this.newPurchase = {product: '', quantity: 1, price: 0, supplier: '', date: ''};
    },
    addPurchase() {
      if (!this.newPurchase.product || !this.newPurchase.quantity || !this.newPurchase.price || !this.newPurchase.supplier || !this.newPurchase.date) {
        this.$message.warning('请填写完整信息');
        return;
      }
      this.$http.post('/purchase/create', this.newPurchase).then(res => {
        if (res.data.code === 2000) {
          this.$message.success('进货记录已添加');
          this.createDialogVisible = false;
          this.loadPurchases(1);
        } else {
          this.$message.error(res.data.msg || '添加失败');
        }
      });
    },
    openEditDialog(row) {
      this.editPurchase = Object.assign({}, row);
      this.editDialogVisible = true;
    },
    updatePurchase() {
      if (!this.editPurchase.product || !this.editPurchase.quantity || !this.editPurchase.price || !this.editPurchase.supplier || !this.editPurchase.date) {
        this.$message.warning('请填写完整信息');
        return;
      }
      this.$http.put('/purchase/update', this.editPurchase).then(res => {
        if (res.data.code === 2000) {
          this.$message.success('修改成功');
          this.editDialogVisible = false;
          this.loadPurchases(this.pagination.currentPage);
        } else {
          this.$message.error(res.data.msg || '修改失败');
        }
      });
    },
    deletePurchase(id) {
      this.$http.delete('/purchase/delete?id=' + id).then(res => {
        if (res.data.code === 2000) {
          this.$message.success('删除成功');
          this.loadPurchases(this.pagination.currentPage);
        } else {
          this.$message.error(res.data.msg || '删除失败');
        }
      });
    }
  },
  created() {
    this.loadPurchases(1);
  }
}
</script>

<style scoped>
.my-title {
  color: #c09494;
  margin: 0;
}
</style> 